<template>
  <main class="spgl-wrap">
    <el-row>
      <el-form :inline="true" :model="formInline" label-width="80px" label-position="left" class="demo-form-inline" style="width: 100%">
        <el-col :span="8">
          <el-form-item :label="$t('clientfile.filename')">
            <el-input v-model="formInlineMy.id" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('clientfile.inputor')">
            <el-input v-model="formInlineMy.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('clientfile.inputtime')">
            <el-input v-model="formInlineMy.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" style="margin: 0 0 10px 15px">查 询</el-button>
          <el-button type="primary" style="margin: 0 0 10px 15px">重置</el-button>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24" :offset="22">
        <el-button type="primary" @click="uploadDialogVisible = true" style="margin: 0 0 10px 15px">导入</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table v-if="tableData.length > 0" :data="tableData" style="width: 100%">
          <!-- 来源编号 -->
          <el-table-column prop="code" label="导入编号" width="130" align="center" />
          <!-- 来源类型 -->
          <el-table-column prop="type" label="文件名称" width="110" align="center">
            <template #default="scope">
              {{ useDict("product_type", scope.row.type) }}
            </template>
          </el-table-column>
          <!-- 一级来源名称 -->
          <el-table-column prop="subCount" label="状态" width="130" align="center" />
          <!-- 状态 -->

          <!-- 创建时间 -->
          <el-table-column prop="createTime" label="导入时间" width="130" align="center" />
          <!-- 创建人 -->
          <el-table-column prop="createUserName" label="导入人" width="130" align="center" />
          <el-table-column prop="status" label="导入结果" width="130" align="center" />
          <!-- 操作 -->
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button size="small" plain>导出附件</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-empty :image-size="200" v-else />
      </el-col>
      <el-col :span="24">
        <!-- 分页 -->
        <el-pagination v-model:currentPage="pageControls.currentPage" v-model:page-size="pageControls.pageSize" :page-sizes="[5, 10, 20, 30]" :small="pageControls.small" :disabled="pageControls.disabled"
          :background="pageControls.background" layout="total,sizes , prev, pager, next,jumper" :total="pageControls.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-col>
    </el-row>
    <!-- <AddNoGoods v-model:dialogVisible="dialogVisible" @confirmHandle="updateTable"></AddNoGoods> -->
    <!-- 批量导入弹框 -->
    <el-dialog v-model="uploadDialogVisible" title="批量导入" width="30%" center>
      <div>
        <p>1、请先下载客户导入模版，按照要求填写完成，上传到系统；</p>
        <p>2、上传完成后在【批量工具】中查看导入进度和结果</p>
        <p>3、最多支持上传10000行Excel数据（如果超2分钟未完成上传，请联系XXX</p>
      </div>
      <div style="margin:0 auto;">
        <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">
          Drop file here or <em>click to upload</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="uploadDialogVisible = false">确认</el-button>
          <el-button type="primary" @click="uploadDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </main>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref, watch, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import baseService from "@/service/baseService";
import { useDict } from "@/hooks/useDict";
import { UploadFilled } from '@element-plus/icons-vue'
// import AddNoGoods from "@/components/my/spgl/AddNoGoods.vue";
// import { Timer } from '@element-plus/icons-vue'
let uploadDialogVisible = ref(false);
interface IForm {
  title: string;
  isSell: number;
  type: number;
  grade: number;
  lessonType: number;
}
// 定义的搜素字段接口
interface IFormMy {
  id: string;
  name: string;
  state: number;
  creator: string;
  createTime: string;
}
interface IListForm {
  code: string;
  createTime: string;
  createUserName: string;
  description: string;
  id: number;
  isValid: number;
  level: number;
  status: number;
  subCount: number;
  thirdCount: number;
  title: string;
  type: number;
  updateTime: string;
}
// 定义分页接口
interface IPage {
  currentPage: number;
  pageSize: number;
  small?: boolean;
  background?: boolean;
  disabled?: boolean;
  total?: number;
}
let dialogVisible = ref(false);
let tableData: IListForm[] = reactive([]); // 表格数据
let isUpdateTable = ref<boolean>(false); // 是否更新表格
const formInline: IForm = reactive({
  // 表单数据
  title: "",
  isSell: 0,
  type: 0,
  grade: 0,
  lessonType: 0
});
const formInlineMy: IFormMy = reactive({
  // 表单数据
  id: "",
  name: "",
  state: 1,
  creator: "",
  createTime: ""
});
// 表格分页
const pageControls = reactive<IPage>({
  currentPage: 1,
  pageSize: 5,
  small: false,
  background: true,
  disabled: false,
  total: 1
});
onMounted(() => {
  nextTick(() => {
    fetchGoodsList();
  });
});
// 监听表格是否需要进行更新
watch(
  () => isUpdateTable.value,
  () => {
    fetchGoodsList();
  }
);
// 添加完商品之后，需要重新表格
const updateTable = (isUpdate: boolean) => {
  isUpdateTable.value = isUpdate;
  isUpdate ? console.log("确认更新") : "";
};
const fetchGoodsList = async (
  param: { pageIndex: number; pageSize: number } = {
    pageIndex: pageControls.currentPage,
    pageSize: pageControls.pageSize
  }
) => {
  tableData.length = 0;
  // 商品列表获取
  const res = await baseService.post("/channel/list", param);
  if (res.code === 200) {
    // console.log(res.data.records)
    tableData.push(...res.data.records);
    pageControls.currentPage = Number(res?.data?.current);
    pageControls.pageSize = Number(res?.data?.size);
    pageControls.total = Number(res?.data?.total);
  } else {
    console.error("获取数据失败");
  }
  console.log(res, "商品管理");
};

// const handleEdit = (index: number, row: IGoods) => {
//   console.log(index, row);
// };
const $router = useRouter();
const handleData = (index: number, row: IListForm) => {
  console.log(index, row);

  $router.push({ name: "dataShow", query: { id: "10001" } });
};
// const handleDelete = (index: number, row: IGoods) => {
//   console.log(index, row);
// };
const onNewGoods = () => {
  // 新建商品
  console.log("submit!");
  dialogVisible.value = true;
};

// 数据查询
const searchTableData = async (param = Object.assign(formInline, { pageIndex: pageControls.currentPage, pageSize: pageControls.pageSize })) => {
  tableData.length = 0;
  // 商品列表获取
  const res = await baseService.post("/product/list", param);
  if (res.code === 200) {
    tableData.push(...res.data.records);
    pageControls.currentPage = Number(res?.data?.current);
    pageControls.pageSize = Number(res?.data?.size);
    pageControls.total = Number(res?.data?.total);
  } else {
    console.error("获取数据失败");
  }
  console.log(res, "商品管理");
};
// 表格分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageControls.pageSize = val;
  fetchGoodsList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pageControls.currentPage = val;
  fetchGoodsList();
};
</script>
<style lang="scss">
.demo-form-inline {
  width: 100%;
}
.spgl-wrap {
  .el-form-item {
    width: 100%;
    .el-select {
      width: 249px;
    }
  }
  .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
  }
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
}
</style>
